<template>
  <div
    :style="$store.getters.screenWidth ? 'width:48%;' : 'width:25%;margin-bottom: 20px'"
    @click="topitem(itemobj.id)"
    class="product_item_home"
  >
    <div class="pp_item" :style="$store.getters.screenWidth ? 'width:97%' : 'width:92%'">
      <div style="width:100%;position: relative;max-height:100%" :style="$store.getters.screenWidth ? 'height:60%' : ''">
        <div class="item_cancel" v-if="isshow" style="position:absolute;display:none">
          <i class="el-icon-error" style="color:red;font-size:20px"></i>
        </div>
        <span style="width:100%;height:100%;overflow:hidden">
          <img
            :class="isbig ? 'img_roate' : ''"
            style="width:100%;max-height:100%;transition: all 1s ease 0s;object-fit: cover;"
            :src="itemobj.image"
            alt
          />
        </span>
      </div>
      <div class="item_detail" :style="'background:'+badcolor">
        <div class="item_detail_title" style="font-size:18px;">{{itemobj.storeName | dealWithName}}</div>
        <div style="font-size:16px;color:#f96868!important">￥{{itemobj.price || 0}}元</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  props: {
    badcolor: {
      type: String,
      default: "#fff"
    },
    isshow: {
      type: Boolean,
      default: false
    },
    isbig:{
      type:Boolean,
      default:true
    },
    itemobj: Object
  },
  filters:{
    dealWithName(val){
      if(val.length > 6){
        return val
      }else{
        return val
      }
    }
  },
  mounted() {},
  methods: {
    topitem(index) {
      this.$router.push({ path: "/productDetail", query: { userId: index } });
    }
  }
};
</script>>
<style lang="scss">
.product_item_home{
  display:flex;
  align-items: center;
  justify-content: center;
}
.img_roate {
  &:hover {
    transform: scale(1.2);
  }
}
.pp_item {
  background-color: #fff;
  display: flex;
  flex-direction: column;
  &:hover .item_detail_title {
    color: #62a8ea;
  }
}
.pp_item div:hover .item_cancel {
  display: block !important;
  position: absolute;
  top: 0;
  right: 0;
}
.item_detail {
  height: 20%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 15px;
  box-sizing: border-box;
  cursor: pointer;
}
</style>